<template>
  <!-- //文章列表 -->
  <div class="articleList" ref="artList">
    <!-- 上面拉刷新 -->
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <!-- 这里放的是van-list -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- $router.push地址传参，query是参数 -->
        <van-cell
          v-for="(item, index) in list"
          :key="item.art_id"
          :title="item.title"
        >
          <template #label>
            <!-- 图片区域 -->
            <!-- :column-num：一层几列   本来一个页面的一层的图片用length可以把一行的图片列出，但是有某层没有图片,.length读不出undefined的长度就会报错，type跟每层的图片数量（length）一样，就渲染这个参数即可 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item
                v-for="(value, index) in item.cover.images"
                :key="index"
                @click="
                  $router.push({ path: '/article', query: { id: item.art_id } })
                "
              >
                <van-image :src="value" />
              </van-grid-item>
            </van-grid>
            <!-- 作者信息区域 -->
            <div class="info">
              <span>{{ item.aut_name }}</span>
              <span style="margin: 0 10px">评论{{ item.comm_count }}</span>
              <span>{{ item.pubdate | relvTime }}</span>
              <span class="z" @click="blacklist(index)"
                ><van-icon name="cross" style="float: right"
              /></span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model="popshow" style="width: 45%">
      <van-cell title="不敢兴趣" @click="lose" />
      <van-cell title="反馈垃圾内容" @click="rubbish" is-link />
      <van-cell title="拉黑作者" @click="Pop" />
    </van-popup>

    <van-popup v-model="lashow" style="width: 45%">
      <van-cell title="返回" @click="blacklist" icon="arrow-left" />
      <van-cell title="  拉布拉多" @click="xx" />
      <van-cell title="  货拉拉" @click="xx" />
      <van-cell title="  拉不拉屎" @click="xx" />
      <van-cell title="  拉黑作者" @click="Pop" />
    </van-popup>
  </div>
</template>

<script>
import { articleListAPI, articleInfoAPI } from "@/api";
export default {
  name: "articleList",
  // 接收参数
  props: {
    channel_id: {
      // 必传
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false, //页面没铺满一屏就来调用加载数据的方法
      finished: false,

      timestamp: Date.now(), //时间戳 //Date.now()查询最新事件

      // 标记上面拉刷新的状态
      pullLoading: false,

      scrollTop: 0, //保存滚动条距离
      popshow: false, //单项拉黑
      lahei: "", //保存拉黑下标

      lashow: false, //第二层拉黑
    };
  },
  methods: {
    //上拉刷新渲染首页文章列表
    async onLoad() {
      let res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp,
      });
      // 拿到数据了，赋值数组
      // this.list = res.data.data.results;
      // --------------- 上面这句话有问题 ----------------
      //  --------------- 因为不断的在覆盖，就会导致不会保存之前请求到的新闻 ----------------
      this.list.push(...res.data.data.results);
      // console.log(res);
      // 拿到数组，赋值之前新闻的时间戳
      this.timestamp = res.data.data.pre_timestamp;

      // console.log(res.data.data.results[0].cover.images);//图片裂开，属性前没加：

      // 代表本次加载完，需要进行下次加载
      this.loading = false;

      if (this.timestamp == null) {
        this.finished = true;
      }
    },
    //下拉刷新渲染首页文章列表
    async onRefresh() {
      let res = await articleListAPI({
        channel_id: this.channel_id, //当前自己（index）频道
        timestamp: Date.now(), //因为上面拉刷新要最新的新闻，所谓使用当前时间请求
      });
      // 把请求到的最新数据直接覆盖（即下拉后渲染最新新闻）
      this.list = res.data.data.results;
      // 把下一段的时间戳赋值一下，方便用户做上拉列表刷新（用户不行上拉，也有可能下拉，所以将上面onLoad请求的下一个时间戳保存一下）
      //pre_timestamp  时间戳理解为是查询上一页数据所需要的时间戳/以前新闻的时间戳
      this.timestamp = res.data.data.pre_timestamp;
      this.pullLoading = false; // 把下拉刷新状态改为false，表示加载完成。pullLoading对应上面拉刷新的v-model
    },

    //拉黑功能
    Pop() {
      // console.log(16);
      this.popshow = false;
      this.$toast.success("此功能暂未开通");
    },
    //不感兴趣功能
    lose() {
      this.list.splice(this.lahei, 1);
      this.popshow = false;
    },
    //反馈垃圾内容
    rubbish() {
      this.popshow = false;
      this.lashow = true;
    },
    //点击X函数
    blacklist(index) {
      this.lashow = false;
      this.popshow = true;
      this.lahei = index;
    },
    //第二层拉黑暂未开通功能
    xx() {
      this.$toast.success("此功能暂未开通");
      this.lashow = false;
    },
  },
  //通过页面滚动事件保存滚动距离（mounted最早获得Dom元素）
  mounted() {
    this.$refs.artList.onscroll = () => {
      this.scrollTop = this.$refs.artList.scrollTop; //页面滚动距离
    };
  },
  activated() {
    // 激活时再把之前的滚动条的高度赋值给滚动条，让它滚到对应的位置
    this.$refs.artList.scrollTop = this.scrollTop;
  },
};
</script>

<style lang="less">
.articleList {
  overflow: scroll;
  position: fixed; //固定定位根据可见视图定位，方便找到所该定位的地方
  width: 100%; //不是100%宽度是由内容撑开的
  top: 90px; // 是nav-bar高度是46，tabs是44，加起来90  往下挪滚动条就移不到了
  bottom: 50px; // 这是tabbar的高度  往上挪滚动条就移不到了
  .z {
    width: 25px;
    height: 18px;
    float: right;
  }
}
</style>
